使用的是Pose Detection in the Browser: PoseNet Model
一樣是code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
<style>
video {
visibility: hidden;
}
</style>
</head>
<body>
<canvas id="detect_result"></canvas>
<video autoplay playsinline muted id="webcam"></video>
<script src="index.js"> </script>
</body>
</html>
index.js
async function app() {
const model = await posenet.load({
architecture: 'MobileNetV1',
outputStride: 16,
multiplier: 0.75
});
const webcamElement = document.getElementById('webcam');
const canvas = document.getElementById('detect_result');
const context = canvas.getContext('2d');
let showResult = async function () {
canvas.width = webcamElement.videoWidth;
canvas.height = webcamElement.videoHeight;
context.drawImage(webcamElement, 0, 0);
const pose = await model.estimateSinglePose(webcamElement, {
flipHorizontal: false
});
console.log(pose);
pose.keypoints.forEach(element => {
const {
x,
y
} = element.position;
context.beginPath();
context.arc(x, y, 20, 0, 2 * Math.PI);
context.fillStyle = "green";
context.fill();
});
setTimeout(function () {
showResult();
}, 300);
}
let setupWebcam = function () {
return new Promise((resolve, reject) => {
const navigatorAny = navigator;
navigator.getUserMedia = navigator.getUserMedia ||
navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
navigatorAny.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true
},
(stream) => {
webcamElement.srcObject = stream;
webcamElement.addEventListener('loadeddata', () => resolve(),
false);
},
(err) => reject(err));
} else {
reject("getUserMedia failed");
}
});
}
setupWebcam().then(
() => {
console.log("shoq");
showResult();
},
(err) => {
console.log(err);
}
)
}
app();